<template>
<!-- 任务中心 我的任务 -->
<div class="messionCenter">
    <h4 class="myMissionHd">我的任务</h4>
    <div class="searchCondition">
        <div class="searchConditionHd">
            <!-- 搜索框行-->
            <el-row :gutter="20" class="lineHeight borderBot pb-10">
                <el-col :span="3">
                    <div class="searchInp">
                        <i class="iconfont icon-jianpan maincolor"></i>
                        <span class="pl-15 ">模糊搜索</span>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="">
                        <el-input placeholder="请输入报案号、立案号、计算书号、预赔号、保单号" v-model="searchConditions.searchWord">
                            <el-button slot="append" icon="el-icon-search" @click="searchMession"></el-button>
                        </el-input>
                    </div>
                </el-col>
                <el-col :span="2">
                    <el-button class="mainColor">重置</el-button>
                </el-col>
            </el-row>
            <!--搜索条件 -->
            <el-row :gutter="20" class="lineHeight mgt-10">
                <el-col :span="3">
                    <div class="searchCon">
                        <i class="iconfont icon-fenceng maincolor"></i>
                        <span class="pl-15 ">归属环节</span>
                    </div>
                </el-col>
                <el-col :span="20">
                    <el-checkbox-group v-model="checkboxGroup1" size="medium">
                        <el-checkbox-button class="borderNone" v-for="item in ascription" :label="item.value" :key="item.code">
                            {{ item.value }}
                        </el-checkbox-button>
                    </el-checkbox-group>
                </el-col>
                <el-col :span="2"></el-col>
            </el-row>
            <el-row :gutter="20" class="lineHeight mgt-10">
                <el-col :span="3">
                    <div class="searchCon">
                        <i class="iconfont icon-shenghuoyongpin- maincolor"></i>
                        <span class="pl-15 ">归属险类</span>
                    </div>
                </el-col>
                <el-col :span="20">
                    <el-checkbox-group v-model="checkboxGroup2" size="medium">
                        <el-checkbox-button class="borderNone" v-for="item in insurances" :label="item.value" :key="item.code">{{ item.value  }}</el-checkbox-button>
                    </el-checkbox-group>
                </el-col>
                <el-col :span="2"></el-col>
            </el-row>
            <el-row :gutter="20" class="lineHeight mgt-10">
                <el-col :span="3">
                    <div class="searchCon">
                        <i class="iconfont icon-wenjian2 maincolor"></i>
                        <span class="pl-15 ">案件类型</span>
                    </div>
                </el-col>
                <el-col :span="20">
                    <el-checkbox-group v-model="checkboxGroup3" size="medium">
                        <el-checkbox-button class="borderNone" v-for="item in types" :label="item.value" :key="item.code">{{ item.value}}</el-checkbox-button>
                    </el-checkbox-group>
                </el-col>
                <el-col :span="2"></el-col>
            </el-row>
            <el-row :gutter="20" class="lineHeight mgt-10">
                <el-col :span="3">
                    <div class="searchCon">
                        <i class="iconfont icon-jishiqi maincolor"></i>
                        <span class="pl-15 ">流入时间</span>
                    </div>
                </el-col>
                <el-col :span="20">
                    <el-checkbox-group v-model="checkboxGroup4" size="medium">
                        <el-checkbox-button class="borderNone" v-for="item in inTimes" :label="item.value" :key="item.code">{{ item.value}}</el-checkbox-button>
                    </el-checkbox-group>
                </el-col>
                <el-col :span="2"></el-col>
            </el-row>
            <el-row :gutter="20" class="lineHeight mgt-10">
                <el-col :span="3">
                    <div class="searchCon">
                        <i class="iconfont icon-xiaoqi maincolor"></i>
                        <span class="pl-15 ">案件状态</span>
                    </div>
                </el-col>
                <el-col :span="20">
                    <el-checkbox-group v-model="checkboxGroup5" size="medium">
                        <el-checkbox-button class="borderNone" v-for="item in status" :label="item.value" :key="item.code">{{ item.value}}</el-checkbox-button>
                    </el-checkbox-group>
                </el-col>
                <el-col :span="2"></el-col>
            </el-row>
        </div>
        <div class="searchConditionBd" v-show="isShow">
            <h4 class="leftHd">
                查询结果
            </h4>
            <div class="tableList">
                <el-table @cell-click="goToCasePage" :data="searchResult.slice((currentPage-1)*pagesize,currentPage*pagesize)" stripe style="width: 100%">
                    <el-table-column class="tableHd" prop="type" label="案件类型">
                        <img class="caseTypeImg" src="../../../public/resources/images/normal.jpg" alt="" />
                    </el-table-column>
                    <el-table-column prop="taskInTime" label="流入时间" width="100"></el-table-column>
                    <el-table-column prop="registNo" label="报案号" width="180" class="mainColor" style="cusor:pointer"></el-table-column>
                    <el-table-column prop="appliName" label="投保人"></el-table-column>
                    <el-table-column prop="insuredName" label="被保险人"></el-table-column>
                    <el-table-column prop="guishuhuanjie" label="归属环节"></el-table-column>
                    <el-table-column prop="caseStatus" label="案件状态"></el-table-column>
                    <el-table-column prop="workStatus" label="任务状态"></el-table-column>
                    <el-table-column prop="handlerUser" label="当前处理人" width="90"></el-table-column>
                    <el-table-column prop="riskCode" label="险种名称" width="100"></el-table-column>
                    <el-table-column prop="comCode" label="机构名称" width="120"></el-table-column>
                    <el-table-column label="流程图"><i class="iconfont icon-hierarchy-vii"></i></el-table-column>
                    <el-table-column prop="myCare" label="关注"><i class="iconfont icon-xinaixin"></i></el-table-column>
                </el-table>
                <div class="block mgt-10">
                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="pagesize" layout="total, sizes, prev, pager, next, jumper" :total="searchResult.length"></el-pagination>
                </div>
            </div>
        </div>
    </div>
</div>
</template>

<script>
import {
    mapState,
    mapActions
} from "vuex";
import variables from "@/styles/variables.scss";
const ascription = [{
    code: "0",
    value: "报案"
}, {
    code: "1",
    value: "调度"
}, {
    code: "3",
    value: "查勘"
}, {
    code: "4",
    value: "案件处理"
}, {
    code: "5",
    value: "理算"
}, {
    code: "6",
    value: "结案"
}];
const insurances = [{
    code: "0",
    value: "企财险"
}, {
    code: "1",
    value: "家财险"
}, {
    code: "3",
    value: "责任险"
}, {
    code: "4",
    value: "保证险"
}, {
    code: "5",
    value: "船舶险"
}, {
    code: "6",
    value: "货运险"
}];
const types = [{
    code: "5",
    value: "正常案件"
}, {
    code: "6",
    value: "简易案件"
}];
const inTimes = [{
    code: "0",
    value: "一天内"
}, {
    code: "1",
    value: "三天内"
}, {
    code: "2",
    value: "一周内"
}, {
    code: "3",
    value: "一个月内"
}, {
    code: "4",
    value: "一年内"
}];
const status = [{
    code: "0",
    value: "未处理"
}, {
    code: "1",
    value: "正在处理"
}, {
    code: "2",
    value: "已处理"
}, {
    code: "3",
    value: "已注销"
}];
export default {
    data() {
        return {
            isShow: false,
            searchConditions: {
                searchWord: "",
            },
            searchResult: [],
            pagesize: 10,
            checkboxGroup1: [],
            checkboxGroup2: [],
            checkboxGroup3: [1],
            checkboxGroup4: [2],
            checkboxGroup5: [3, 4],
            ascription: ascription,
            insurances: insurances,
            types: types,
            inTimes: inTimes,
            status: status,
            currentPage: 1,
            input2: "",

        };
    },

    methods: {
        ...mapActions("mission", ["queryTaskByUser"]),
        searchMession() {
            debugger
            this.queryTaskByUser(this.searchConditions).then(result => {
                this.isShow = true;
                this.searchResult = result.data.data;
            })
        },
        goToCasePage(row, column, cell, event) {
            console.log(row, column, cell, event)
            console.log(row.id, column.label)
            if (column.label === "报案号") {
                this.$router.push({
                        name: "case",
                        query: row,
                    }

                )
            }
        },
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
        }
    },
    computed: {
        ...mapState({})
    }
};
</script>

<style lang="scss">
.minHeight {
    height: 36px;
}

.lineHeight {
    line-height: 36px;
}

.maincolor {
    color: #409eff;
}

.leftHd {
    text-align: left;
    border-left: 2px solid rgb(87, 155, 222);
    margin-left: 10px;
    padding-left: 10px;
}

.messionCenter {
    width: 100%;
    background: rgb(242, 242, 242);
}

.myMissionHd {
    background: rgb(242, 242, 242) !important;
    margin: 0;
    padding: 10px 0 10px 30px;
    border-bottom: 1px solid #dcdfe6;
}

.searchConditionHd {
    width: 95%;
    padding: 30px 40px;
    background: white;
    margin: 10px auto;
}

.searchConditionHd .el-checkbox-button--medium .el-checkbox-button__inner {
    border: none;
    border-radius: 4px;
    margin-right: 10px;
}

.searchConditionBd {
    width: 95%;
    background: white;
    margin: 10px auto;
    padding: 10px;

    .tableList {
        margin-bottom: 25px;

        .el-table th {
            background-color: rgb(242, 242, 242);
        }

        .caseTypeImg {
            padding-left: 10px;
            width: 30px;
        }

        .el-table__body tbody tr td:nth-child(3) {
            color: #409eff;
        }
    }
}
</style>
